<template>
  <el-upload
    class="upload-signle"
    :action="uoloadAction" 
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-exceed="handleExceed"
    :file-list="fileList"
    list-type="picture"
    :multiple="false"
    :limit = "1"
    >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>

</template>

<script>
  
  import config from '@/config/config';
export default {
  name: 'singleUpload',
  props:{
    // 上传地址
    uoloadAction:{
      type:String,
      required: true
    },
    // 成功回调函数
    successCallBack:{
      type:Function,
      required: true
    },
    // 分类图标
    icon:String
  },
  data() {
      return {
        fileList: []
      };
    },
  watch:{
    icon(value){
      // console.log(value); 
      if(value){
         this.fileList.push({
          name:value.substr(value.substr(value.lastIndexOf('/')+1)),
          url:config.BASE_URL + value
        })
      }
     
    }
  },  
  methods: {
    // 上传成功
    handleSuccess(response,file, fileList){
      console.log(response)
      if(response.status === 1){
        this.successCallBack(response.data) 
      }
    },
    // 删除
    handleRemove(file, fileList) {
       console.log(file, fileList);
      if(file.status === "success"){
        this.fileList = []
        this.successCallBack(null)
      } 
    },

    // 上传个数限制提示
    handleExceed(){
      this.$message.error('只能上传一个图标!')
    } 
  }
}
</script>
